<!--
列表过滤项的开关控制

参数：
title - 标题
optionList - 选项(通常可通过fpsHelper获取)，传入格式的例子如下:
{
  isPayer:{
    label:'付款方',
    show:true,
    order:1
  },
  isStorer:{
    label:'货主',
    show:true,
    order:2
  },
  //...
}

事件：
'update:option-list': 选项发生变化，传回的参数与optionList的格式完全相同，可使用.sync处理回传
'update-filter-options-for-save': 点确定时返回这个数组，表明哪些过滤项是显示的，可将此数据保存到localStorage中去，格式如下：
  [ 'isPayer', 'isStorer' ... ]
  还原时候尝试从localStorage中读取之，如能读取到，将不在此列的过滤项给隐藏起来
-->

<template>
  <div>
    <q-btn color="primary" icon="view_list" :title="$t(props.title)" @click="onOpenOptions" />
    <q-dialog position="top" v-model="dlgState" transition-show="none" transition-hide="none">
      <q-card style="max-width:300px; width:300px; top: 50px" class="q-pa-sm">
        <q-card-section class="q-pa-none ">
          <div class="text-h6">{{$t(props.title)}}</div>
        </q-card-section>
        <div class="row items-center">
          <q-checkbox :label="$t('全部')" color="primary" :model-value="isAllchecked" @update:model-value="onCheckAll" dense
            class="q-py-xs" />
        </div>
        <q-separator />
        <q-scroll-area style="height: 203px" :visible="true">
          <div v-for="opt in $d.internalOptList" :key="opt.key" class="row items-center">
            <q-checkbox :label="opt.label" color="primary" v-model="opt.show" dense class="q-py-xs" />
          </div>
        </q-scroll-area>
        <q-separator />
        <div class="row q-gutter-xs q-pt-sm">
          <q-btn color="primary" outline size="sm" icon="refresh" @click="resetOptionList" no-caps/>
          <q-space />
          <q-btn v-close-popup color="primary" :label="$t('确定')" @click="onConfirm" no-caps/>
          <q-btn v-close-popup unelevated color="primary" outline :label="$t('取消')" no-caps/>
        </div>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">
export default {
  name: 'filterOptionsCfg'
}
</script>

<script lang="ts" setup>
import _ from 'lodash'
import {FilterInfo} from '../defs/comm'
import {computed, reactive, ref} from 'vue'

interface PropsDef {
  // 标题,默认为'查询选项开关'
  title?: string
  // 选项列表
  optionList: Record<string, FilterInfo>
}

const props = withDefaults(defineProps<PropsDef>(), {
  title: '查询选项开关'
})

// 对话框显示/隐藏状态
const dlgState = ref(false)


// 转换过的内部列表，格式如下：
// [
//   { key:'isPayer', label:'付款方', show: true, order: 1 },
//   { key:'isStorer', label:'货主', show: true, order: 2 },
//   ...
// ]
// 还需要根据传入的order排序
interface InternalOptItem {
  key: string,
  label: string,
  show: boolean,
  order: number
}

const $d = reactive({
  internalOptList: [] as InternalOptItem[]
})

const isAllchecked = computed(()=> {
  if ($d.internalOptList.length === 0) {
    return null
  }
  if (_.every($d.internalOptList, { show: true })) {
    return true
  }
  if (_.every($d.internalOptList, { show: false })) {
    return false
  }
  return null
})

const onCheckAll = function() {
  let newCheckState = !(isAllchecked.value == true)
  _.forEach($d.internalOptList, (value) => {
    value.show = newCheckState
  })
}

const emit = defineEmits<{
  (e: 'update:option-list', data: Record<string, FilterInfo>): void
  (e: 'update-filter-options-for-save', data:string[]):void
}>()

const onConfirm = function() {
  // 将internalOptList 转为 optionList 并返回
  let optionList = {} as Record<string, FilterInfo>
  let visibleFilterOptions = [] as string[]
  _.forEach($d.internalOptList, function (value) {
    optionList[value.key] = {
      label: value.label,
      show: value.show,
      order: value.order
    }
    if (value.show) {
      visibleFilterOptions.push(value.key)
    }
  })
  emit('update:option-list', optionList)
  emit('update-filter-options-for-save', visibleFilterOptions)
}

const resetOptionList = function() {
  let internalOptList = [] as InternalOptItem[]
  _.forIn(props.optionList, function (value, key) {
    internalOptList.push({
      key: key,
      label: value.label,
      show: value.show,
      order: value.order
    })
  })
  $d.internalOptList = _.sortBy(internalOptList, function (o) {
    return o.order
  })
}

const onOpenOptions = function() {
  resetOptionList()
  dlgState.value = true
}
</script>
